<template>
    <el-dialog
        v-model="dialogVisible"
        title="修改密码"
        width="30%"
        :before-close="handClose"
    >
        <div>
            <el-form :model="formData" ref="formRef" label-width="80px" :rules="rules">
                <el-form-item label="旧密码" prop="password">
                    <el-input 
                        v-model="formData.oldPassword" 
                        type="password"
                        placeholder="请输入新密码"
                        :prefix-icon="Lock"
                        show-password
                    />
                </el-form-item>
                <el-form-item label="新密码" prop="password">
                    <el-input 
                        v-model="formData.password" 
                        type="password"
                        placeholder="请输入新密码"
                        :prefix-icon="Lock"
                        show-password
                    />
                </el-form-item>
                <el-form-item label="再次输入" prop="password">
                    <el-input 
                        v-model="formData.password2" 
                        type="password"
                        placeholder="请输入新密码"
                        :prefix-icon="Lock"
                        show-password
                    />
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
        <span class="dialog-footer">
            <el-button @click="closeDialog">取消</el-button>
            <el-button type="primary" @click="confirmDialog">
            更新
            </el-button>
        </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref, onMounted,reactive, computed, defineProps, defineEmits, watch} from 'vue'
import {useRouter, useRoute} from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import {Lock } from '@element-plus/icons-vue'
import UserApi from '../../apis/user'
import {useUserStore} from '../../stores/user'

const router = useRouter();
const route = useRoute();
const userStore = useUserStore()

const formRef = ref<FormInstance>()
const formData = ref({
    password: "",
    password2: "",
    oldPassword: ""
})

const rules = reactive<FormRules>({
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 5, max: 16, message: '最小长度6, 最大长度16', trigger: 'blur' },
  ]
})

const props = defineProps({
    isShow: Boolean,
})
const emit = defineEmits(['update:isShow']);

const dialogVisible = ref(props.isShow);
watch(()=> props.isShow,() => {
    console.log('props.isShow change', props.isShow);
    dialogVisible.value = props.isShow
});

const handClose = () =>{
    console.log('handClose');
    emit('update:isShow', false)
}

const closeDialog = () => {
    console.log('closeDialog');
    emit('update:isShow', false)
}

const confirmDialog = () => {
    // 退出登录, 重新登陆
    if(formData.value.password != formData.value.password2){
        ElMessage({
            type: 'error',
            message: "两次密码不一样",
        });
        return;
    }
    UserApi.updatePassword(formData.value.oldPassword, formData.value.password).then(ret=>{
        if(ret.code == 0){
            ElMessage({
                type: 'success',
                message: "更新成功,请重新登陆",
            });
            setTimeout(async () => {
                emit('update:isShow', false)
                await userStore.logout();
                location.href="/#/login";
            }, 1500);
        }else{
            ElMessage({
                type: 'error',
                message: "更新失败",
            });
        }
    }).catch(err=>{
        ElMessage({
            type: 'error',
            message: err
        });
    })
    
}
</script>

<style scoped>
</style>
